import Taro, { Component } from "@tarojs/taro";
import { View, Text, ScrollView } from "@tarojs/components";
import { fileClass } from "../../mock";
import "./index.less";
const tabStyle = {
  paddingRight: "5%",
  marginRight: "5%",
  fontSize: "14px",
  opacity: "0.8",
  color: "#ffffff"
};
const tabSelectedStyle = {
  borderBottom: "4px solid #ffffff",
  paddingBottom: "2%",
  marginRight: "10%",
  fontSize: "16px",
  fontWeight: "600",
  color: "#ffffff"
};
export default class FormPage extends Component {
  config = {
    navigationStyle: "custom"
  };
  constructor(props) {
    super(props);
    this.state = {
      currentTab: 1
    };
  }
  componentWillMount() {}

  componentDidMount() {}

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}
  handleType = type => {
    console.log(type);
    this.setState({
      currentTab: type.id
    });
  };
  render() {
    const { currentTab } = this.state;
    console.log(fileClass);
    return (
      <View>
        <View
          className="index"
          style={{
            paddingTop: "15%",
            backgroundColor: "#1980ff"
          }}
        >
          <ScrollView
            scrollX="true"
            style={{
              width: "100%",

              whiteSpace: "nowrap",
              paddingBottom: "2px"
            }}
          >
            <View
              style={{
                marginLeft: "5%",
                paddingBottom: "10px"
              }}
            >
              {fileClass.map(v => {
                return (
                  <Text
                    key={v.id}
                    style={v.id == currentTab ? tabSelectedStyle : tabStyle}
                    onClick={() => this.handleType(v)}
                  >
                    {v.title}
                  </Text>
                );
              })}
            </View>
          </ScrollView>
        </View>
        <View style={{ marginTop: "10%" }}>
          <View className="d-card">
            <View className="d-card-content">contene</View>
            <View className="d-card-header">name</View>
          </View>
          <View className="d-card">
            <View className="d-card-content">contene</View>
            <View className="d-card-header">name</View>
          </View>
          <View className="d-card">
            <View className="d-card-content">contene</View>
            <View className="d-card-header">name</View>
          </View>
        </View>
      </View>
    );
  }
}
